<template>
  <div class="changePermission">
    <el-col :span="10">
      <el-radio-group v-model="label" class="ml-25  " @change="change">
        <el-radio label="1">添加班级</el-radio>
        <el-radio label="2">添加专业</el-radio>
        <el-radio label="3">添加学院</el-radio>
      </el-radio-group>

      <el-row v-if="label == '3'" class="mt-10">
        <el-form ref="form" :model="form" label-width="100px" :rules="rules" >
          <el-form-item label="学院名称" prop="colname">
            <el-input v-model="form.colname" placeholder="请输入学院名称" ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-row>
   <el-row v-if="label == '2'" class="mt-10">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="请选择学院">
            <el-select v-model="form.collageid" placeholder="请选择学院" style="width: 100%">
              <el-option
                v-for="item in college"
                :key="item.colId"
                :label="item.colname"
                :value="item.colId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="专业名称" prop="college">
            <el-input v-model="form.majorname" placeholder="请输入专业名称" ></el-input>
          </el-form-item>


          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row v-if="label == '1'" class="mt-10">
        <el-form ref="form" :model="form" label-width="100px" >
          <el-form-item label="请选择学院" >
            <el-select v-model="form.colId" placeholder="请选择学院" style="width: 100%" @change="getmajor(form.colId)">
              <el-option
                v-for="item in college"
                :key="item.colId"
                :label="item.colname"
                :value="item.colId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请选择专业" >
            <el-select v-model="form.majorname" placeholder="请选择学院" style="width: 100%">
              <el-option
                v-for="item in Majors"
                :key="item.id"
                :label="item.majorname"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级" >
            <el-input v-model="form.clazzName" placeholder="请输入班级" ></el-input>
          </el-form-item>
          <el-form-item label="辅导员" prop="college">
            <el-autocomplete
              popper-class="my-autocomplete"
              v-model="state"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect">
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick">
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ getcollagename(item.address) }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </el-col>
  </div>
</template>

<script>
  export default {
    name: "Class_management",
    data() {
      var checkucollege = (rule, value, callback) => {
        if (value == '') {

          callback(new Error('不能为空'));
        } else {
          //查询班级是否存在
          callback();
        }
      };
      return {
        restaurants: [],
        label: "1",
        state: "",
        college: [],
        classes: [],
        Majors:[],

        form: {
          colname: "",
          collageid: "",
          majorname: "",
          colId: "",
          clazzName: "",
          counsellor: "",

        },
        rules: {
          colname: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
        }

      }
    },
    methods: {
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      }, handleSelect(item) {
        this.form.counsellor = item.id;
      },
      handleIconClick(ev) {
        console.log(ev);
      },


      getcollagename(id) {
        var title = "";
        this.college.forEach(function (item) {


          if (id + "" == item.colId + "") {

            title = item.colname
            return title;
          }
        })
        return title;
      },

      getmajor(va) {
        var self = this;
        this.form.majorname = '';
        this.$http.get(this.URL.api + "querybycolid?colid=" + va).then(function (response) {

          self.Majors = response.data.data;

        }).catch(function (response) {

        });
      },

      getclazz(va) {

        var self = this;

        this.$http.get(this.URL.api + "querybymajorid?majorid=" + va).then(function (response) {

          self.calzzs = response.data.data;

        }).catch(function (response) {

        });
      },
      change() {

        this.form.majorname = ""
        this.form. colId= "",
        this.$http.get(this.URL.api + "queryallcollage")
          .then(response => {

              this.college = response.data.data;
            },
          );

      },
      submitForm(form) {
        var self = this;

        this.$refs[form].validate((valid) => {
          if (valid) {
            //判断
            var url = "";
            if (self.label == "3") {
              url = "addCollege"
            } else if (self.label == "2") {
              url = "addMajor"
            } else {
              url = "addClazz"
            }
            this.$http.post(self.URL.api + url, self.form).then(res => {
              if (res.data.flag) {
                self.$message.success("添加成功")
              }else{
                self.$message.error(res.data.message)
              }
            })

          } else {
            return false;
          }
        });
      },
      resetForm(form) {
        this.$refs[form].resetFields();
      },
      gettype() {

      }
    },
    mounted: function () {
      this.change();
      this.$http.get(this.URL.api + "user/queryByAllteacher").then(res => {
        var self = this;
        if (res.data.flag) {
          res.data.data.forEach(function (item) {
            var data = {value: item.teaname, address: item.college, id: item.id}
            self.restaurants.push(data)
          })


        }

      })


    }

  }
</script>

<style scoped>
  .ml-25 {
    margin-left: 25px;
  }

  .mt-10 {
    margin-top: 20px;
  }

  .my-autocomplete {
  }

  li {
    line-height: normal;
    padding: 7px;
  }

  .name {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .addr {
    font-size: 12px;
    color: #b4b4b4;
  }

  .highlighted .addr {
    color: #ddd;
  }


</style>
